<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>账单结算</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="Thu, 19 Nov 1900 08:52:00 GMT">
        <link rel="shortcut icon" href="images/icons/favicon.ico" th:href="@{/images/icons/favicon.ico}">
        <link rel="apple-touch-icon" href="images/icons/favicon.png" th:href="@{/images/icons/favicon.png}">
        <link rel="apple-touch-icon" sizes="72x72" href="images/icons/favicon-72x72.png" th:href="@{/images/icons/favicon-72x72.png}">
        <link rel="apple-touch-icon" sizes="114x114" href="images/icons/favicon-114x114.png" th:href="@{/images/icons/favicon-114x114.png}">
        <!--Loading bootstrap css-->
        <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700">
        <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald:400,700,300">
        <link type="text/css" rel="stylesheet" href="../static/vendors/jquery-ui-1.10.4.custom/css/ui-lightness/jquery-ui-1.10.4.custom.min.css" th:href="@{/vendors/jquery-ui-1.10.4.custom/css/ui-lightness/jquery-ui-1.10.4.custom.min.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/font-awesome/css/font-awesome.min.css" th:href="@{/vendors/font-awesome/css/font-awesome.min.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/bootstrap/css/bootstrap.min.css" th:href="@{/vendors/bootstrap/css/bootstrap.min.css}">
        <!--LOADING STYLESHEET FOR PAGE-->
        <link type="text/css" rel="stylesheet" href="../static/vendors/intro.js/introjs.css" th:href="@{/vendors/intro.js/introjs.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/calendar/zabuto_calendar.min.css" th:href="@{/vendors/calendar/zabuto_calendar.min.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/sco.message/sco.message.css" th:href="@{/vendors/sco.message/sco.message.css}">
        <!--Loading style vendors-->
        <link type="text/css" rel="stylesheet" href="../static/vendors/animate.css/animate.css" th:href="@{/vendors/animate.css/animate.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/jquery-pace/pace.css" th:href="@{/vendors/jquery-pace/pace.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/iCheck/skins/all.css" th:href="@{/vendors/iCheck/skins/all.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/jquery-notific8/jquery.notific8.min.css" th:href="@{/vendors/jquery-notific8/jquery.notific8.min.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/bootstrap-daterangepicker/daterangepicker-bs3.css" th:href="@{/vendors/bootstrap-daterangepicker/daterangepicker-bs3.css}">
        <!--Loading style-->
        <link type="text/css" rel="stylesheet" href="../static/css/themes/style1/orange-blue.css" class="default-style" th:href="@{/css/themes/style1/orange-blue.css}">
        <link type="text/css" rel="stylesheet" href="../static/css/themes/style1/orange-blue.css" id="theme-change" class="style-change color-change" th:href="@{/css/themes/style1/orange-blue.css}">
        <!--  <link type="text/css" rel="stylesheet" href="css/style-responsive.css">-->
        <!--新增加的css样式-->
        <link type="text/css" rel="stylesheet" href="../static/css/addcss.css" th:href="@{/css/addcss.css}">
        <script src="/static/js/jquery-2.1.1.min.js" th:src="@{/js/jquery-2.1.1.min.js}"></script>
        <style>
            #container{
                overflow: hidden;
                margin-bottom: 8px;
            }
            #addOrderDetail,#addOrderDetail div{
                float: left;
            }
        </style>
    </head>
    <body class=" ">
        <div>
            <!--BEGIN BACK TO TOP-->
            <a id="totop" href="#"><i class="fa fa-angle-up"></i></a>
            <!-- 引用头部 -->
            <div th:replace="common/top::topFragment"></div>
            <!--END TOPBAR-->
            <div id="wrapper">
                <!-- 引用左菜单导航栏 -->
                <div th:replace="common/leftToolBar::leftToolbar"></div>
                <!--END CHAT FORM-->
                <!--BEGIN PAGE WRAPPER-->
                <div id="page-wrapper">
                    <!-- 引用工具条 -->
                    <div th:replace="common/toolBar::toolBar"></div>
                    <!--END TITLE & BREADCRUMB PAGE-->
                    <!--BEGIN CONTENT-->
                    <!--右侧区内容的编写 -->
                    <div class="page-content">
                        <div th:replace="stay/common/modal::modal"></div>
                        <!-- 添加账单容器 -->
                        <div id="container">
                            <div style="float: left"><button class="btn btn-success" style="background: grey;border: 0px;margin-bottom: 10px" onclick='javascript:$("#addOrderDetail").animate({marginLeft:"0px"},1500);'>添加账单</button></div>
                            <div id="addOrderDetail" style="margin-left: -1100px;">
                                <form action="" method="post" id="orderDetailForm">
                                    <div style="margin:4px 25px 0 30px"><label>订单编号：</label><input id="ordersId" name="orders.ordersId" style="width: 240px" data-toggle="tooltip" title="订单编号不能为空" data-trigger="manual"/></div>
                                    <div style="margin:4px 25px 0 0"><label>物品名称：</label><input id="goodsName" name="goodsName" data-toggle="tooltip" title="物品名称不能为空" data-trigger="manual"/></div>
                                    <div style="margin:4px 25px 0 0"><label>物品价格：</label><input id="goodsPrice" name="goodsPrice" data-toggle="tooltip" title="物品价格不能为空" data-trigger="manual"/></div>
                                    <button type="button" class="btn btn-info" style="margin-right: 10px" onclick="addOrderDetail()">确定</button>
                                    <button type="button" class="btn btn-info" onclick='javascript:$("#addOrderDetail").animate({marginLeft:"-1100px"},1500);'>关闭</button>
                                </form>
                            </div>
                        </div>
                        <div style="margin-bottom: 10px">
                            <form th:action="@{/orders/getOrdersList(pageNum=1,orderState=入住结算,orderStatus=${orderStatus})}" method="post">
                                客户名称：<input name="name" th:value="${name}" style="margin-right: 15px"/>
                                房间号：<input name="roomId" th:value="${roomId}" style="margin-right: 15px"/>
                                <button type="submit" style="background: gainsboro;width: 55px;height: 35px;border-radius: 7px;">查询</button>
                            </form>
                        </div>
                        <!-- 账单数据列表 -->
                        <table class="table table-striped" border="red solid 1px">
                            <thead>
                                <tr>
                                    <th>订单编号</th>
                                    <th>客户名称</th>
                                    <th>房间号</th>
                                    <th>房型名</th>
                                    <th>总金额</th>
                                    <th>已支付金额</th>
                                    <th>待支付金额</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr th:each="order : ${pageInfo.getList()}">
                                    <td th:text="${order.ordersId}"></td>
                                    <td th:text="${order.customer.name}"></td>
                                    <td th:text="${order.room.roomId}"></td>
                                    <td th:text="${order.room.roomType.typeName}" th:value="${order.room.roomType.roomTypeId}"></td>
                                    <td th:text="${order.totalMoney}"></td>
                                    <td th:text="${order.repayMoney}"></td>
                                    <td th:text="${order.totalMoney} - ${order.repayMoney}"></td>
                                    <td>[[${order.status.statusName}]]</td>
                                    <td>
                                        <button style="background: gainsboro;" th:onclick="ordersDetail([[${order.ordersId}]])">订单详情</button>
                                        <button style="background: gainsboro;" th:onclick="payment([[${order.room.roomType.price}]],[[${order.totalMoney} - ${order.repayMoney}]],this,[[${order.ordersId}]])">付款</button>
                                        <button style="background: gainsboro;" th:onclick="checkOut([[${order.ordersId}]],this,[[${order.room.roomId}]],[[${order.room.roomType.roomTypeId}]])">退房</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <!-- 订单详情框 -->
                        <div class="modal fade" id="ordersDetailModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin-top:35px">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                        <h4 class="modal-title" id="ordersTitle">订单详情</h4>
                                    </div>
                                    <div class="modal-body" id="content">
                                        <h4>入住信息详情：</h4>
                                        <table id="orderDetailTab" class="table table-striped" border="red solid 1px">
                                            <tr>
                                                <th>入住时间</th>
                                                <th>入住时长</th>
                                                <th>房间价格</th>
                                            </tr>
                                        </table>
                                        <h4>入住期间损坏的物品：</h4>
                                        <table id="checkInBreakGoodsTab" class="table table-striped" border="red solid 1px">
                                            <tr>
                                                <th>物品名</th>
                                                <th>物品价格</th>
                                            </tr>
                                        </table>
                                    </div>
                                    <div class="modal-footer" id="btnContainer">
                                        <button type="button" id="close" class="btn btn-info" data-dismiss="modal">关闭</button>
                                    </div>
                                </div><!-- /.modal-content -->
                            </div><!-- /.modal -->
                        </div>
                        <!-- 支付框 -->
                        <div class="modal fade" id="paymentModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin-top: 115px">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                        <h4 class="modal-title" id="myModalLabel">支付操作</h4>
                                    </div>
                                    <div class="modal-body" style="font-size: 17px;text-align: center">
                                        <div>
                                            <label>押金：</label><span style="color: red;" id="price">0.00</span>
                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                            <label>待支付金额：</label><span style="color: red;" id="paymentMoney">0.00</span>
                                            <br/>
                                            <label>实付金额：</label><span style="color: red;" id="actualPayment">0.00</span>
                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                            <label>退还金额：</label><span style="color: red;" id="returnMoney">0.00</span>
                                        </div>
                                        <div style="margin-top: 10px">
                                            <label>支付：</label><input id="payMoney" readonly>
                                            <label style="margin-left: 3px">退还：</label><input id="return" readonly>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-primary" id="confirm">确定</button>
                                        <button type="button" class="btn btn-info" data-dismiss="modal">取消</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 分页工具条 -->
                        <div>
                            <ul class="pager">
                                <li><a th:href="@{/orders/getOrdersList(pageNum=1,name=${name},roomId=${roomId},orderState=入住结算,orderStatus=${orderStatus})}">首页</a></li>
                                <li><a th:href="@{/orders/getOrdersList(pageNum=${pageInfo.isHasPreviousPage()}?${pageInfo.getPrePage()}:1,name=${name},roomId=${roomId},orderState=入住结算,orderStatus=${orderStatus})}">&laquo;</a></li>
                                <li>第 [[${pageInfo.pageNum}]] 页</li>
                                <li><a th:href="@{/orders/getOrdersList(pageNum=${pageInfo.isHasNextPage()}?${pageInfo.getNextPage()}:${pageInfo.pages},name=${name},roomId=${roomId},orderState=入住结算,orderStatus=${orderStatus})}">&raquo;</a></li>
                                <li><a th:href="@{/orders/getOrdersList(pageNum=${pageInfo.pages},name=${name},roomId=${roomId},orderState=入住结算,orderStatus=${orderStatus})}">尾页</a></li>
                                <li>&nbsp;&nbsp;&nbsp;总页数 [[${pageInfo.pages}]] </li>
                                <li>&nbsp;&nbsp;&nbsp;总记录数 [[${pageInfo.total}]] </li>
                            </ul>
                        </div>
                    </div>
                    <!--END CONTENT-->
                </div>
                <!-- 引用底部 -->
                <div th:replace="common/bottom::bottom"></div>
                <!--END FOOTER-->
                <!--END PAGE WRAPPER-->
            </div>
        </div>
        <script th:src="@{/js/stay/modal.js}"></script>
        <script th:src="@{/js/stay/stay.js}"></script>
        <script>
            //显示当前功能导航
            showModuleText("账单结算");


            $(function(){
                //快速查找入住订单
                $("#ordersId").bind("input propertychange",function () {
                    var url = "/orders/getOrdersByOrdersId";
                    var param = "ordersId=" + $(this).val();
                    $.ajax({
                        url:url,
                        type:"post",
                        data:param,
                        dataType:"json",
                        success:function (data) {
                            var customerData = [];//保存客户信息
                            //将json数据封装到数组中
                            $.each(data,function (index,orders) {
                                //将数据保存到数组中
                                customerData[index] = {
                                    label:orders.ordersId+" "+orders.customer.name+" "+orders.customer.idNumber+" "+orders.status.statusName,
                                    value:orders.ordersId
                                }
                            });
                            //通过autocomplete插件实现快速查找
                            $("#ordersId").autocomplete({
                                source:customerData,//数据源
                            });
                        }
                    });
                });
            });

            //查看订单详情
            function ordersDetail(ordersId) {
                //把原来的数据删除
                $("#orderDetailTab tr:not(tr:eq(0))").remove();
                $("#checkInBreakGoodsTab tr:not(tr:eq(0))").remove();
                $("#ordersTitle").html("订单号：" + ordersId);
                var url = "/orders/getOrderDetailInfo";
                var param = "ordersId=" + ordersId;
                $.post(url,param,function (data) {
                    var html;
                    $.each(data,function(index,orderDetail){
                        if (orderDetail.checkInDuration != null){
                            html = "<tr>";
                            html += "<td>"+ orderDetail.orders.checkInDate +"</td>";
                            html += "<td>"+ orderDetail.checkInDuration +"</td>";
                            html += "<td>"+ orderDetail.price +"</td>";
                            html += "</tr>";
                            $("#orderDetailTab").append(html);
                        }
                        if (orderDetail.goodsName != null){
                            html = "<tr>";
                            html += "<td>"+ orderDetail.goodsName +"</td>";
                            html += "<td>"+ orderDetail.goodsPrice +"</td>";
                            html += "</tr>";
                            $("#checkInBreakGoodsTab").append(html);
                        }
                    });
                    $("#ordersDetailModal").modal("show");
                });
            }

            //添加账单
            function addOrderDetail(){
                if (!checkOrderDetailForm()) return;
                //如果订单编号的长度不等于32直接提示订单不存在，因为订单编号都是32位的
                if($("#ordersId").val().length != 32){
                    $("#ordersId").attr("data-original-title","订单编号不存在").tooltip("show");
                    setTimeout(function(){$("#ordersId").tooltip("hide");},"2500");
                    return;
                }
                var url = "/orders/getOrdersByOrdersId";
                var param = "ordersId=" + $("#ordersId").val();
                $.post(url,param,function(data){
                    if (data.length == 0){
                        $("#ordersId").attr("data-original-title","订单编号不存在或该订单不是入住中的订单").tooltip("show");
                        setTimeout(function(){$("#ordersId").tooltip("hide");},"2500");
                        return;
                    }
                    url = "/orders/addOrderDetail";
                    param = $("#orderDetailForm").serialize();
                    $.post(url,param,function(data){
                        if (data){
                            showModal("温馨提示","账单添加成功");
                            setTimeout(function(){location.href="/orders/getOrdersList?pageNum=1&orderState=入住结算&orderStatus=1";},"2500");
                            return;
                        }
                        showModal("温馨提示","账单添加失败");
                    });
                });
            }

            //验证添加账单表单数据的合法性
            function checkOrderDetailForm(){
                var inps = $("#addOrderDetail div input");
                var validateCount = 0;
                $("#goodsPrice").attr("data-original-title","物品价格不能为空");//还原提示数据
                $("#ordersId").attr("data-original-title","订单编号不能为空");
                $.each(inps,function(index,inp){
                   if ($(inp).val() == '' && $(inp).val().length == 0){
                       $(inp).tooltip("show");
                       validateCount++;
                   }  
                });
                //隐藏提示工具
                setTimeout(function(){inps.tooltip("hide");},"2500");
                //如果三个都没填则不验证数据的格式直接终止方法
                if (validateCount == 3) return;
                if ($("#goodsPrice").val() != '' && $("#goodsPrice").val() != 0){
                    if (!(/^[1-9]\d*|[1-9]\d*.\d|0\.\d*[1-9]\d*$/.test($("#goodsPrice").val()))){
                        $("#goodsPrice").attr("data-original-title","输入不合法，请输入整数或浮点数").tooltip("show");
                        setTimeout(function(){$("#goodsPrice").tooltip("hide");},"2500");
                        validateCount++;
                    }
                }
                if (validateCount == 0) return true;
                return false;
            }

            //付款
            function payment(price,paymentMoney,btn,ordersId){
                $("#myModal").css({"margin-top":"115px","z-index":"1052"});
                if ($(btn).parent().prev().prev().html() == 0){
                    showModal("温馨提示","当前订单已付清账款");
                    return;
                }
                //给支付框计算相应价格
                $("#price").html(price);
                $("#paymentMoney").html(paymentMoney);
                var money = 0;//记录实付金额和退还金额
                if (paymentMoney == price){ //待支付金额与押金相等，直接抵扣不需要支付或退还
                    $("#actualPayment").html(money);
                    $("#returnMoney").html(money);
                    $("#payMoney").val(0.00);
                    $("#return").val(0.00);
                }else if(paymentMoney < price){//待支付金额小于押金，押金减去待支付金额就是需要退还金额
                    money = price - paymentMoney;
                    $("#actualPayment").html(0);
                    $("#returnMoney").html(money);
                    $("#payMoney").val(0.00);
                    $("#return").val(money);
                }else if(paymentMoney > price){//待支付金额大于押金，待支付金额减去押金就是需要支付金额
                    money = paymentMoney - price;
                    $("#actualPayment").html(money);
                    $("#returnMoney").html(0);
                    $("#payMoney").val(money);
                    $("#return").val(0.00);
                }
                $("#paymentModal").modal("show");
                $("#confirm").unbind("click");//清除之前的click事件
                //确认支付
                $("#confirm").click(function(){
                    var url = "/orders/payment";
                    var param = "ordersId=" + ordersId;
                    $.post(url,param,function(data){
                        if (data){
                            if($("#payMoney").val() == 0 && $("#return").val() == 0){
                                showModal("温馨提示","抵扣成功");
                            }else if($("#payMoney").val() != 0 && $("#return").val() == 0){
                                showModal("温馨提示","支付成功");
                            }else if($("#payMoney").val() == 0 && $("#return").val() != 0){
                                showModal("温馨提示","退还成功");
                            }
                            //修改当前行的待支付金额和已支付金额
                            $(btn).parent().prev().prev().html("0");
                            $(btn).parent().prev().prev().prev().html($(btn).parent().prev().prev().prev().prev().html());
                            $("#paymentModal").modal("hide");
                            return;
                        }
                        if($("#payMoney").val() == 0 && $("#return").val() == 0){
                            showModal("温馨提示","抵扣失败");
                        }else if($("#payMoney").val() != 0 && $("#return").val() == 0){
                            showModal("温馨提示","支付失败");
                        }else if($("#payMoney").val() == 0 && $("#return").val() != 0){
                            showModal("温馨提示","退还失败");
                        }
                        $("#paymentModal").modal("hide");
                    });
                });
            }

            //退房
            function checkOut(ordersId,btn,roomId,roomTypeId){
                $("#myModal").css({"margin-top":"115px","z-index":"1052"});
                if ($(btn).parent().prev().prev().html() != 0){
                    showModal("温馨提示","抱歉当前订单还有："+$(btn).parent().prev().prev().html()+" 元未支付不可退房");
                    return;
                }
                var url = "/orders/checkOut";
                var param = "ordersId=" + ordersId + "&roomId=" + roomId + "&roomTypeId=" + roomTypeId;
                $.post(url,param,function(data){
                    if (data){
                        showModal("温馨提示","退房成功");
                        setTimeout(function(){location.href="/orders/getOrdersList?pageNum=1&orderState=入住结算&orderStatus=1";},"2500");
                        return;
                    }
                    showModal("温馨提示","退房失败");
                });
            }
        </script>
        <!-- 引用脚本 -->
        <div th:replace="common/script::script"></div>
    </body>
</html>
